/* filepath: c:\Users\qq258\workspace\couple-ai-chat\public\spring-theme.js */

// 春天主题增强脚本
document.addEventListener('DOMContentLoaded', function() {
  
  // 主题切换功能
  const modeToggle = document.getElementById('modeToggle');
  const html = document.documentElement;
  
  // 获取当前主题
  let currentTheme = localStorage.getItem('theme') || 'light';
  html.setAttribute('data-theme', currentTheme);
  updateToggleIcon(currentTheme);
  
  // 主题切换事件
  if (modeToggle) {
    modeToggle.addEventListener('click', function() {
      currentTheme = currentTheme === 'light' ? 'dark' : 'light';
      html.setAttribute('data-theme', currentTheme);
      localStorage.setItem('theme', currentTheme);
      updateToggleIcon(currentTheme);
      
      // 添加切换动画
      this.style.transform = 'scale(0.8) rotate(180deg)';
      setTimeout(() => {
        this.style.transform = '';
      }, 200);
    });
  }
  
  // 更新切换按钮图标
  function updateToggleIcon(theme) {
    const icon = modeToggle.querySelector('i');
    if (theme === 'dark') {
      icon.className = 'fas fa-sun';
    } else {
      icon.className = 'fas fa-moon';
    }
  }
  
  // 输入框增强交互
  const inputs = document.querySelectorAll('.input-wrapper input');
  inputs.forEach(input => {
    const wrapper = input.parentElement;
    const icon = wrapper.querySelector('.input-icon');
    
    // 焦点效果
    input.addEventListener('focus', function() {
      wrapper.style.transform = 'translateY(-2px)';
      if (icon) {
        icon.style.color = 'var(--spring-primary)';
        icon.style.transform = 'scale(1.1)';
      }
    });
    
    input.addEventListener('blur', function() {
      wrapper.style.transform = 'translateY(0)';
      if (icon) {
        icon.style.color = 'var(--text-muted)';
        icon.style.transform = 'scale(1)';
      }
    });
    
    // 输入时的动态效果
    input.addEventListener('input', function() {
      if (this.value.length > 0) {
        this.style.borderColor = 'var(--spring-secondary)';
      } else {
        this.style.borderColor = 'transparent';
      }
    });
  });
  
  // 按钮点击反馈
  const buttons = document.querySelectorAll('.btn-submit, .tab-btn');
  buttons.forEach(button => {
    button.addEventListener('click', function() {
      this.style.transform = 'scale(0.95)';
      setTimeout(() => {
        this.style.transform = '';
      }, 150);
    });
  });
  
  // 卡片悬停效果增强
  const card = document.querySelector('.card');
  if (card) {
    card.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-8px) scale(1.02)';
    });
    
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0) scale(1)';
    });
  }
  
  // 页面加载动画
  const elementsToAnimate = [
    '.logo-container',
    '.card',
    '.main-title h1'
  ];
  
  elementsToAnimate.forEach((selector, index) => {
    const element = document.querySelector(selector);
    if (element) {
      element.style.opacity = '0';
      element.style.transform = 'translateY(30px)';
      
      setTimeout(() => {
        element.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
        element.style.opacity = '1';
        element.style.transform = 'translateY(0)';
      }, index * 200);
    }
  });
  
  // 动态调整花瓣数量（基于性能）
  function adjustPetalsForPerformance() {
    const petals = document.querySelectorAll('.petal');
    const isLowEnd = navigator.hardwareConcurrency < 4 || 
                     /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    if (isLowEnd) {
      petals.forEach((petal, index) => {
        if (index > 3) {
          petal.style.display = 'none';
        }
      });
    }
  }
  
  // 检测设备性能并调整动画
  adjustPetalsForPerformance();
  
  // 春天彩蛋：点击logo特效
  const logoIcon = document.querySelector('.logo-icon');
  if (logoIcon) {
    logoIcon.addEventListener('click', function() {
      // 创建临时花瓣爆炸效果
      for (let i = 0; i < 8; i++) {
        const petal = document.createElement('div');
        petal.className = 'petal';
        petal.style.position = 'fixed';
        petal.style.left = this.getBoundingClientRect().left + 'px';
        petal.style.top = this.getBoundingClientRect().top + 'px';
        petal.style.zIndex = '1000';
        petal.style.animation = `petalBurst 1s ease-out forwards`;
        petal.style.animationDelay = (i * 100) + 'ms';
        
        document.body.appendChild(petal);
        
        setTimeout(() => {
          if (petal.parentNode) {
            petal.parentNode.removeChild(petal);
          }
        }, 1200);
      }
      
      // Logo动画
      this.style.animation = 'logoBurst 0.6s ease-out';
      setTimeout(() => {
        this.style.animation = 'logoPulse 3s ease-in-out infinite';
      }, 600);
    });
  }
  
  // 添加花瓣爆炸动画
  const style = document.createElement('style');
  style.textContent = `
    @keyframes petalBurst {
      0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
      }
      100% {
        transform: translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px) 
                   rotate(${Math.random() * 360}deg) scale(0);
        opacity: 0;
      }
    }
    
    @keyframes logoBurst {
      0%, 100% { transform: scale(1) rotate(0deg); }
      50% { transform: scale(1.2) rotate(10deg); }
    }
  `;
  document.head.appendChild(style);
  
  // 优化：减少重排重绘
  let ticking = false;
  function optimizedAnimationFrame(callback) {
    if (!ticking) {
      requestAnimationFrame(() => {
        callback();
        ticking = false;
      });
      ticking = true;
    }
  }
  
  // 滚动优化（如果有滚动内容）
  window.addEventListener('scroll', () => {
    optimizedAnimationFrame(() => {
      // 滚动时的优化处理
    });
  });
  
});